<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="An enterprise-class UI design language and React-based implementation with a set of high-quality React components, one of best React UI library for enterprises">
    <title>Ant Design - A UI Design Language</title>
    <link rel="icon" href="https://gw.alipayobjects.com/zos/rmsportal/rlpTLlbMzTNYuZGGCVYM.png" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="/index-1.css"/>
    <link rel="stylesheet" type="text/css" href="/index-2.css"/>
    <style id="nprogress-style">
      #nprogress { display: none }
    </style>
    <link rel="stylesheet/less" type="text/css" href="/color.less"/>
    <script src="https://gw.alipayobjects.com/os/lib/??es6-shim/0.35.3/es6-sham.min.js,es6-shim/0.35.3/es6-shim.min.js"></script>
    <!--[if lte IE 10]>
    <script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,media-match/2.0.2/media.match.min.js"></script>
    <![endif]-->
    <script>
    if (!window.Intl) {
      document.writeln('<script src="https://as.alipayobjects.com/g/component/intl/1.0.1/??Intl.js,locale-data/jsonp/en.js,locale-data/jsonp/zh.js">' + '<' + '/script>');
    }
    </script>
    <script>
    (function() {
      function isLocalStorageNameSupported() {
        var testKey = 'test';
        var storage = window.localStorage;
        try {
          storage.setItem(testKey, '1');
          storage.removeItem(testKey);
          return true;
        } catch (error) {
          return false;
        }
      }
      // 优先级提高到所有静态资源的前面，语言不对，加载其他静态资源没意义
      var pathname = location.pathname;

      function isZhCN(pathname) {
        return /-cn\/?$/.test(pathname);
      }
      function getLocalizedPathname(path, zhCN) {
        var pathname = path.startsWith('/') ? path : '/' + path;
        if (!zhCN) { // to enUS
          return /\/?index-cn/.test(pathname) ? '/' : pathname.replace('-cn', '');
        } else if (pathname === '/') {
          return '/index-cn';
        } else if (pathname.endsWith('/')) {
          return pathname.replace(/\/$/, '-cn/');
        }
        return pathname + '-cn';
      }

      // 兼容旧的 URL， `?locale=...`
      var queryString = location.search;
      if (queryString) {
        var isZhCNConfig = queryString.indexOf('zh-CN') > -1;
        if (isZhCNConfig && !isZhCN(pathname)) {
          location.pathname = getLocalizedPathname(pathname, isZhCNConfig)
        }
      }

      // 首页无视链接里面的语言设置 https://github.com/ant-design/ant-design/issues/4552
      if (isLocalStorageNameSupported() && (pathname === '/' || pathname === '/index-cn')) {
        var lang = (window.localStorage && localStorage.getItem('locale')) || ((navigator.language || navigator.browserLanguage).toLowerCase() === 'zh-cn' ? 'zh-CN' : 'en-US');
        // safari is 'zh-cn', while other browser is 'zh-CN';
        if ((lang === 'zh-CN') !== isZhCN(pathname)) {
          location.pathname = getLocalizedPathname(pathname, lang === 'zh-CN');
        }
      }
      document.documentElement.className += isZhCN(pathname) ? 'zh-cn' : 'en-us';
    })()
    </script>
  </head>
  <body>
    <div id="react-content">
      <div class="page-wrapper"><header id="header" class="clearfix"><div class="ant-row"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-5 ant-col-xl-5 ant-col-xxl-4"><a id="logo" href="/index-cn"><img alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"/><img alt="Ant Design" src="https://gw.alipayobjects.com/zos/rmsportal/DkKNubTaaVsKURhcVGkh.svg"/></a></div><div class="ant-col-xs-0 ant-col-sm-0 ant-col-md-18 ant-col-lg-19 ant-col-xl-19 ant-col-xxl-20"><div id="search-box"><i class="anticon anticon-search"><svg viewBox="64 64 896 896" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></i><input type="text" placeholder="在 ant.design 中搜索" class="ant-input"/></div><button type="button" class="ant-btn header-lang-button ant-btn-sm ant-btn-background-ghost"><span>English</span></button><div class="ant-select-sm version ant-select ant-select-enabled"><div class="ant-select-selection
            ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0"><div class="ant-select-selection__rendered"><div class="ant-select-selection-selected-value" title="3.10.3" style="display:block;opacity:1">3.10.3</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none" unselectable="on"><i class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></div></div><ul class="ant-menu menu-site ant-menu-light ant-menu-root ant-menu-horizontal" id="nav" role="menu"><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none" role="menuitem"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li class="ant-menu-item" role="menuitem"><a href="/index-cn"><span>首页</span></a></li><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none" role="menuitem"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li class="ant-menu-item" role="menuitem"><a href="/docs/spec/introduce-cn"><span>设计语言</span></a></li><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none" role="menuitem"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li class="ant-menu-item ant-menu-item-selected" role="menuitem"><a href="/docs/react/introduce-cn"><span>组件</span></a></li><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none" role="menuitem"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li class="ant-menu-item" role="menuitem"><a href="http://pro.ant.design" class="header-link" target="_blank" rel="noopener noreferrer"><span>PRO</span></a></li><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none" role="menuitem"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li class="ant-menu-item" role="menuitem"><a href="https://www.yuque.com/ant-design/course" class="header-link" target="_blank" rel="noopener noreferrer">教程<span style="display:inline-block;position:relative;top:-2px;width:6px;margin-left:8px"><span class="ant-badge ant-badge-not-a-wrapper"><sup data-show="true" class="ant-scroll-number ant-badge-dot"></sup></span></span></a></li><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="visibility:hidden;position:absolute" role="menuitem"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li></ul></div></div></header><div class="main-wrapper"><div class="ant-row"><div class="main-menu ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-lg-6 ant-col-xl-5 ant-col-xxl-4"><ul class="ant-menu aside-container menu-site ant-menu-light ant-menu-root ant-menu-inline" role="menu"><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/react/introduce-cn">Ant Design of React</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/react/getting-started-cn">快速上手</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/react/practical-projects-cn">项目实战</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/react/use-with-create-react-app-cn">在 create-react-app 中使用</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/react/use-in-typescript-cn">在 TypeScript 中使用</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/react/customize-theme-cn">定制主题</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/changelog-cn">更新日志</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/react/recommendation-cn">社区精选组件</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/react/i18n-cn">国际化</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/react/faq-cn">FAQ</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/react/contributing-cn">贡献指南</a></li><li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected" role="menuitem"><div style="padding-left:40px" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="Components$Menu" aria-haspopup="true"><h4>Components</h4><i class="ant-menu-submenu-arrow"></i></div><ul id="Components$Menu" class="ant-menu  ant-menu-sub ant-menu-inline" role="menu"><li class=" ant-menu-item-group"><div class="ant-menu-item-group-title" title="General">General</div><ul class="ant-menu-item-group-list"><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/button-cn/"><span>Button</span><span class="chinese">按钮</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/icon-cn/"><span>Icon</span><span class="chinese">图标</span></a></li></ul></li><li class=" ant-menu-item-group"><div class="ant-menu-item-group-title" title="Layout">Layout</div><ul class="ant-menu-item-group-list"><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/grid-cn/"><span>Grid</span><span class="chinese">栅格</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/layout-cn/"><span>Layout</span><span class="chinese">布局</span></a></li></ul></li><li class=" ant-menu-item-group"><div class="ant-menu-item-group-title" title="Navigation">Navigation</div><ul class="ant-menu-item-group-list"><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/affix-cn/"><span>Affix</span><span class="chinese">固钉</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/breadcrumb-cn/"><span>Breadcrumb</span><span class="chinese">面包屑</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/dropdown-cn/"><span>Dropdown</span><span class="chinese">下拉菜单</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/menu-cn/"><span>Menu</span><span class="chinese">导航菜单</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/pagination-cn/"><span>Pagination</span><span class="chinese">分页</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/steps-cn/"><span>Steps</span><span class="chinese">步骤条</span></a></li></ul></li><li class=" ant-menu-item-group"><div class="ant-menu-item-group-title" title="Data Entry">Data Entry</div><ul class="ant-menu-item-group-list"><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/auto-complete-cn/"><span>AutoComplete</span><span class="chinese">自动完成</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/cascader-cn/"><span>Cascader</span><span class="chinese">级联选择</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/checkbox-cn/"><span>Checkbox</span><span class="chinese">多选框</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/date-picker-cn/"><span>DatePicker</span><span class="chinese">日期选择框</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/form-cn/"><span>Form</span><span class="chinese">表单</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/input-cn/"><span>Input</span><span class="chinese">输入框</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/input-number-cn/"><span>InputNumber</span><span class="chinese">数字输入框</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/mention-cn/"><span>Mention</span><span class="chinese">提及</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/rate-cn/"><span>Rate</span><span class="chinese">评分</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/radio-cn/"><span>Radio</span><span class="chinese">单选框</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/select-cn/"><span>Select</span><span class="chinese">选择器</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/slider-cn/"><span>Slider</span><span class="chinese">滑动输入条</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/switch-cn/"><span>Switch</span><span class="chinese">开关</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/tree-select-cn/"><span>TreeSelect</span><span class="chinese">树选择</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/time-picker-cn/"><span>TimePicker</span><span class="chinese">时间选择框</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/transfer-cn/"><span>Transfer</span><span class="chinese">穿梭框</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/upload-cn/"><span>Upload</span><span class="chinese">上传</span></a></li></ul></li><li class=" ant-menu-item-group"><div class="ant-menu-item-group-title" title="Data Display">Data Display</div><ul class="ant-menu-item-group-list"><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/avatar-cn/"><span>Avatar</span><span class="chinese">头像</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/badge-cn/"><span>Badge</span><span class="chinese">徽标数</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/calendar-cn/"><span>Calendar</span><span class="chinese">日历</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/card-cn/"><span>Card</span><span class="chinese">卡片</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/carousel-cn/"><span>Carousel</span><span class="chinese">走马灯</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/collapse-cn/"><span>Collapse</span><span class="chinese">折叠面板</span></a></li><li class="ant-menu-item ant-menu-item-selected" role="menuitem" style="padding-left:80px"><a href="/components/list-cn/"><span>List</span><span class="chinese">列表</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/popover-cn/"><span>Popover</span><span class="chinese">气泡卡片</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/tooltip-cn/"><span>Tooltip</span><span class="chinese">文字提示</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/table-cn/"><span>Table</span><span class="chinese">表格</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/tabs-cn/"><span>Tabs</span><span class="chinese">标签页</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/tag-cn/"><span>Tag</span><span class="chinese">标签</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/timeline-cn/"><span>Timeline</span><span class="chinese">时间轴</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/tree-cn/"><span>Tree</span><span class="chinese">树形控件</span></a></li></ul></li><li class=" ant-menu-item-group"><div class="ant-menu-item-group-title" title="Feedback">Feedback</div><ul class="ant-menu-item-group-list"><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/alert-cn/"><span>Alert</span><span class="chinese">警告提示</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/drawer-cn/"><span>Drawer</span><span class="chinese">抽屉</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/modal-cn/"><span>Modal</span><span class="chinese">对话框</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/message-cn/"><span>Message</span><span class="chinese">全局提示</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/notification-cn/"><span>Notification</span><span class="chinese">通知提醒框</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/progress-cn/"><span>Progress</span><span class="chinese">进度条</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/popconfirm-cn/"><span>Popconfirm</span><span class="chinese">气泡确认框</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/spin-cn/"><span>Spin</span><span class="chinese">加载中</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/skeleton-cn/"><span>Skeleton</span><span class="chinese">骨架屏</span></a></li></ul></li><li class=" ant-menu-item-group"><div class="ant-menu-item-group-title" title="Other">Other</div><ul class="ant-menu-item-group-list"><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/anchor-cn/"><span>Anchor</span><span class="chinese">锚点</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/back-top-cn/"><span>BackTop</span><span class="chinese">回到顶部</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/divider-cn/"><span>Divider</span><span class="chinese">分割线</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/locale-provider-cn/"><span>LocaleProvider</span><span class="chinese">国际化</span></a></li></ul></li></ul></li></ul></div><div class="main-container main-container-component ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-lg-18 ant-col-xl-19 ant-col-xxl-20"><article><div class="toc-affix"><div class=""><ul id="demo-toc" class="toc"><li title="简单列表"><a href="#components-list-demo-simple">简单列表</a></li><li title="基础列表"><a href="#components-list-demo-basic">基础列表</a></li><li title="加载更多"><a href="#components-list-demo-loadmore">加载更多</a></li><li title="竖排列表样式"><a href="#components-list-demo-vertical">竖排列表样式</a></li><li title="栅格列表"><a href="#components-list-demo-grid">栅格列表</a></li><li title="响应式的栅格列表"><a href="#components-list-demo-resposive">响应式的栅格列表</a></li><li title="滚动加载"><a href="#components-list-demo-infinite-load">滚动加载</a></li><li title="滚动加载无限长列表"><a href="#components-list-demo-infinite-virtualized-load">滚动加载无限长列表</a></li></ul></div></div><section class="markdown"><h1>List<span class="subtitle">列表</span><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/list/index.zh-CN.md" target="_blank" rel="noopener noreferrer"><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" class="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></a></h1><section class="markdown"><p>通用列表。</p><h2 id="何时使用"><span>何时使用</span><a href="#何时使用" class="anchor">#</a></h2><p>最基础的列表展示，可承载文字、列表、图片、段落，常用于后台数据展示页面。</p></section><h2><span>代码演示</span><i class="anticon anticon-appstore-o code-box-expand-trigger"><svg viewBox="64 64 896 896" class="" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg></i></h2></section><div class="ant-row" style="margin-left:-8px;margin-right:-8px"><div style="padding-left:8px;padding-right:8px" class="ant-col-24 code-boxes-col-1-1"><section class="code-box" id="components-list-demo-simple"><section class="code-box-demo"><div><h3 style="margin-bottom:16px">Default Size</h3><div class="ant-list ant-list-split ant-list-bordered ant-list-something-after-last-item"><div class="ant-list-header"><div>Header</div></div><div class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-list-item"><div class="ant-list-item-content ant-list-item-content-single">Racing car sprays burning fuel into crowd.</div></div><div class="ant-list-item"><div class="ant-list-item-content ant-list-item-content-single">Japanese princess to wed commoner.</div></div><div class="ant-list-item"><div class="ant-list-item-content ant-list-item-content-single">Australian walks 100km after outback crash.</div></div><div class="ant-list-item"><div class="ant-list-item-content ant-list-item-content-single">Man charged over missing wedding girl.</div></div><div class="ant-list-item"><div class="ant-list-item-content ant-list-item-content-single">Los Angeles battles huge wildfires.</div></div></div></div><div class="ant-list-footer"><div>Footer</div></div></div><h3 style="margin:16px 0">Small Size</h3><div class="ant-list ant-list-sm ant-list-split ant-list-bordered ant-list-something-after-last-item"><div class="ant-list-header"><div>Header</div></div><div class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-list-item"><div class="ant-list-item-content ant-list-item-content-single">Racing car sprays burning fuel into crowd.</div></div><div class="ant-list-item"><div class="ant-list-item-content ant-list-item-content-single">Japanese princess to wed commoner.</div></div><div class="ant-list-item"><div class="ant-list-item-content ant-list-item-content-single">Australian walks 100km after outback crash.</div></div><div class="ant-list-item"><div class="ant-list-item-content ant-list-item-content-single">Man charged over missing wedding girl.</div></div><div class="ant-list-item"><div class="ant-list-item-content ant-list-item-content-single">Los Angeles battles huge wildfires.</div></div></div></div><div class="ant-list-footer"><div>Footer</div></div></div><h3 style="margin:16px 0">Large Size</h3><div class="ant-list ant-list-lg ant-list-split ant-list-bordered ant-list-something-after-last-item"><div class="ant-list-header"><div>Header</div></div><div class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-list-item"><div class="ant-list-item-content ant-list-item-content-single">Racing car sprays burning fuel into crowd.</div></div><div class="ant-list-item"><div class="ant-list-item-content ant-list-item-content-single">Japanese princess to wed commoner.</div></div><div class="ant-list-item"><div class="ant-list-item-content ant-list-item-content-single">Australian walks 100km after outback crash.</div></div><div class="ant-list-item"><div class="ant-list-item-content ant-list-item-content-single">Man charged over missing wedding girl.</div></div><div class="ant-list-item"><div class="ant-list-item-content ant-list-item-content-single">Los Angeles battles huge wildfires.</div></div></div></div><div class="ant-list-footer"><div>Footer</div></div></div></div></section><section class="code-box-meta markdown"><div class="code-box-title"><a href="#components-list-demo-simple">简单列表</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/list/demo/simple.md" target="_blank" rel="noopener noreferrer"><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" class="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></a></div><div><p>列表拥有大、中、小三种尺寸。</p><p>通过设置 <code>size</code> 为 <code>large</code> <code>small</code> 分别把按钮设为大、小尺寸。若不设置 <code>size</code>，则尺寸为中。</p><p>可通过设置 <code>header</code> 和 <code>footer</code>，来自定义列表头部和尾部。</p></div><span class="code-expand-icon"><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg" class="code-expand-icon-show"/><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg" class="code-expand-icon-hide"/></span></section><section class="highlight-wrapper"><div class="highlight"><div class="code-box-actions"><form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data" value="{&quot;title&quot;:&quot;简单列表 - Ant Design Demo&quot;,&quot;html&quot;:&quot;&lt;div id=\&quot;container\&quot; style=\&quot;padding: 24px\&quot;&gt;&lt;/div&gt;\n&lt;script&gt;\n  var mountNode = document.getElementById(&#x27;container&#x27;);\n&lt;/script&gt;&quot;,&quot;js&quot;:&quot;&quot;,&quot;css&quot;:&quot;@import &#x27;antd/dist/antd.css&#x27;;\n\n&quot;,&quot;editors&quot;:&quot;001&quot;,&quot;css_external&quot;:&quot;https://unpkg.com/antd/dist/antd.css&quot;,&quot;js_external&quot;:&quot;https://unpkg.com/react@16.x/umd/react.development.js;https://unpkg.com/react-dom@16.x/umd/react-dom.development.js;https://unpkg.com/moment/min/moment-with-locales.js;https://unpkg.com/antd/dist/antd-with-locales.js&quot;,&quot;js_pre_processor&quot;:&quot;typescript&quot;}"/><input type="submit" value="Create New Pen with Prefilled Data" class="code-box-codepen"/></form><form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSACYwoNvkYTzMBOMTE0QgoaenCYAaEIOEBaFqQC2SMRPhMAvrtkRybAB4EMcBMhA1GDESBDb9hmCZLNr9RuoA65CCpRSfloAAgAlIQxQsH5VEIByeSj4gG5ff0Dg8MjaABEAeQBZEJi4xJylVVT0gKDQ-LRGFgB6FggpZsbaFlNzar9arPiCZoNjXrh-3xCZ2bmHJ3GAC1oVKHc6W3UAHjaANxCIFgBebys6NAMYfjOQqQBPWFOQdBY28lxEEIAmABYUIxnAB821aED2QN82zgGH4EBQtEh5BmezQ_BCKlIAFdGAA5UhsELHELKDBYlS2Aj4WgAUVgFMYACF7gBJFgACniHku5Gu8QAlGlyKCYXCEUCHLogA"/><input type="submit" value="Create New Sandbox with Prefilled Data" class="code-box-codesandbox"/></form><i class="anticon anticon-copy code-box-code-copy"><svg viewBox="64 64 896 896" class="" data-icon="copy" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"></path></svg></i></div><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> List <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token string">'Racing car sprays burning fuel into crowd.'</span><span class="token punctuation">,</span>
  <span class="token string">'Japanese princess to wed commoner.'</span><span class="token punctuation">,</span>
  <span class="token string">'Australian walks 100km after outback crash.'</span><span class="token punctuation">,</span>
  <span class="token string">'Man charged over missing wedding girl.'</span><span class="token punctuation">,</span>
  <span class="token string">'Los Angeles battles huge wildfires.'</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> marginBottom<span class="token punctuation">:</span> <span class="token number">16</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Default Size<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>List</span>
      <span class="token attr-name">header={&lt;div</span><span class="token punctuation">></span></span>Header<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">}</span>
      footer<span class="token operator">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>Footer<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">}</span>
      bordered
      dataSource<span class="token operator">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span>
      renderItem<span class="token operator">=</span><span class="token punctuation">{</span>item <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>List.Item</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>item<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>List.Item</span><span class="token punctuation">></span></span><span class="token punctuation">)</span><span class="token punctuation">}</span>
    <span class="token operator">/</span><span class="token operator">></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> margin<span class="token punctuation">:</span> <span class="token string">'16px 0'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Small Size<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>List</span>
      <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span>
      <span class="token attr-name">header={&lt;div</span><span class="token punctuation">></span></span>Header<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">}</span>
      footer<span class="token operator">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>Footer<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">}</span>
      bordered
      dataSource<span class="token operator">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span>
      renderItem<span class="token operator">=</span><span class="token punctuation">{</span>item <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>List.Item</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>item<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>List.Item</span><span class="token punctuation">></span></span><span class="token punctuation">)</span><span class="token punctuation">}</span>
    <span class="token operator">/</span><span class="token operator">></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> margin<span class="token punctuation">:</span> <span class="token string">'16px 0'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Large Size<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>List</span>
      <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span>
      <span class="token attr-name">header={&lt;div</span><span class="token punctuation">></span></span>Header<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">}</span>
      footer<span class="token operator">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>Footer<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">}</span>
      bordered
      dataSource<span class="token operator">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span>
      renderItem<span class="token operator">=</span><span class="token punctuation">{</span>item <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>List.Item</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>item<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>List.Item</span><span class="token punctuation">></span></span><span class="token punctuation">)</span><span class="token punctuation">}</span>
    <span class="token operator">/</span><span class="token operator">></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">,</span>
  mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-list-demo-basic"><section class="code-box-demo"><div class="ant-list ant-list-split"><div class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-list-item"><div class="ant-list-item-meta"><div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/></span></div><div class="ant-list-item-meta-content"><h4 class="ant-list-item-meta-title"><a href="https://ant.design">Ant Design Title 1</a></h4><div class="ant-list-item-meta-description">Ant Design, a design language for background applications, is refined by Ant UED Team</div></div></div></div><div class="ant-list-item"><div class="ant-list-item-meta"><div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/></span></div><div class="ant-list-item-meta-content"><h4 class="ant-list-item-meta-title"><a href="https://ant.design">Ant Design Title 2</a></h4><div class="ant-list-item-meta-description">Ant Design, a design language for background applications, is refined by Ant UED Team</div></div></div></div><div class="ant-list-item"><div class="ant-list-item-meta"><div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/></span></div><div class="ant-list-item-meta-content"><h4 class="ant-list-item-meta-title"><a href="https://ant.design">Ant Design Title 3</a></h4><div class="ant-list-item-meta-description">Ant Design, a design language for background applications, is refined by Ant UED Team</div></div></div></div><div class="ant-list-item"><div class="ant-list-item-meta"><div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/></span></div><div class="ant-list-item-meta-content"><h4 class="ant-list-item-meta-title"><a href="https://ant.design">Ant Design Title 4</a></h4><div class="ant-list-item-meta-description">Ant Design, a design language for background applications, is refined by Ant UED Team</div></div></div></div></div></div></div></section><section class="code-box-meta markdown"><div class="code-box-title"><a href="#components-list-demo-basic">基础列表</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/list/demo/basic.md" target="_blank" rel="noopener noreferrer"><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" class="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></a></div><div><p>基础列表。</p></div><span class="code-expand-icon"><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg" class="code-expand-icon-show"/><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg" class="code-expand-icon-hide"/></span></section><section class="highlight-wrapper"><div class="highlight"><div class="code-box-actions"><form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data" value="{&quot;title&quot;:&quot;基础列表 - Ant Design Demo&quot;,&quot;html&quot;:&quot;&lt;div id=\&quot;container\&quot; style=\&quot;padding: 24px\&quot;&gt;&lt;/div&gt;\n&lt;script&gt;\n  var mountNode = document.getElementById(&#x27;container&#x27;);\n&lt;/script&gt;&quot;,&quot;js&quot;:&quot;&quot;,&quot;css&quot;:&quot;@import &#x27;antd/dist/antd.css&#x27;;\n\n&quot;,&quot;editors&quot;:&quot;001&quot;,&quot;css_external&quot;:&quot;https://unpkg.com/antd/dist/antd.css&quot;,&quot;js_external&quot;:&quot;https://unpkg.com/react@16.x/umd/react.development.js;https://unpkg.com/react-dom@16.x/umd/react-dom.development.js;https://unpkg.com/moment/min/moment-with-locales.js;https://unpkg.com/antd/dist/antd-with-locales.js&quot;,&quot;js_pre_processor&quot;:&quot;typescript&quot;}"/><input type="submit" value="Create New Pen with Prefilled Data" class="code-box-codepen"/></form><form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSACYwoNvkYTzMBOMTE0QgoaenCYAaEIOEBaFqQC2SMRPhMAvrtkRybAB4EMcBMhA1GDESBDb9hmCZLNr9RuoA65CCpRSfloAAgAlIQxQsH5VEIByeSj4gG5ff0Dg8MjaABEAeQBZEJi4xJylVVT0gKDQ-LRGFgB6FggpZsbaFlNzar9arPiCZoNjXrh-3xCZ2bmHJ3GAC1oVKHc6W3UAHjaANxCIFgBebys6NAMYfjOQqQBPWFOQdBY28lxEEIAmABYUIxnAB821aED2QN82zgGH4EBQtEh5BmezQ_BCKlIAFdGAA5UhsELHELKDBYlS2Aj4WgAUVgFMYACF7gBJFgACniHku5Gu8QAlGlyKCYXCEUCHLogA"/><input type="submit" value="Create New Sandbox with Prefilled Data" class="code-box-codesandbox"/></form><i class="anticon anticon-copy code-box-code-copy"><svg viewBox="64 64 896 896" class="" data-icon="copy" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"></path></svg></i></div><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> List<span class="token punctuation">,</span> Avatar <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    title<span class="token punctuation">:</span> <span class="token string">'Ant Design Title 1'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    title<span class="token punctuation">:</span> <span class="token string">'Ant Design Title 2'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    title<span class="token punctuation">:</span> <span class="token string">'Ant Design Title 3'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    title<span class="token punctuation">:</span> <span class="token string">'Ant Design Title 4'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>List</span>
    <span class="token attr-name">itemLayout</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>horizontal<span class="token punctuation">"</span></span>
    <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span>
    <span class="token attr-name">renderItem</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>item <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>List.Item</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>List.Item.Meta</span>
          <span class="token attr-name">avatar={&lt;Avatar</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span></span>
          <span class="token attr-name">title={&lt;a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://ant.design<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>title<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token punctuation">}</span>
          description<span class="token operator">=</span><span class="token string">"Ant Design, a design language for background applications, is refined by Ant UED Team"</span>
        <span class="token operator">/</span><span class="token operator">></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>List.Item</span><span class="token punctuation">></span></span>
    <span class="token punctuation">)</span><span class="token punctuation">}</span>
  <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span>
  mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-list-demo-loadmore"><section class="code-box-demo"><div class="ant-list demo-loadmore-list ant-list-split ant-list-loading"><div class="ant-spin-nested-loading"><div><div class="ant-spin ant-spin-spinning"><span class="ant-spin-dot ant-spin-dot-spin"><i></i><i></i><i></i><i></i></span></div></div><div class="ant-spin-container ant-spin-blur"><div style="min-height:53px"></div></div></div></div><style>.demo-loadmore-list {
  min-height: 350px;
}</style></section><section class="code-box-meta markdown"><div class="code-box-title"><a href="#components-list-demo-loadmore">加载更多</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/list/demo/loadmore.md" target="_blank" rel="noopener noreferrer"><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" class="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></a></div><div><p>可通过 <code>loadMore</code> 属性实现加载更多功能。</p></div><span class="code-expand-icon"><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg" class="code-expand-icon-show"/><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg" class="code-expand-icon-hide"/></span></section><section class="highlight-wrapper"><div class="highlight"><div class="code-box-actions"><form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data" value="{&quot;title&quot;:&quot;加载更多 - Ant Design Demo&quot;,&quot;html&quot;:&quot;&lt;div id=\&quot;container\&quot; style=\&quot;padding: 24px\&quot;&gt;&lt;/div&gt;\n&lt;script&gt;\n  var mountNode = document.getElementById(&#x27;container&#x27;);\n&lt;/script&gt;&quot;,&quot;js&quot;:&quot;&quot;,&quot;css&quot;:&quot;@import &#x27;antd/dist/antd.css&#x27;;\n\n.demo-loadmore-list {\n  min-height: 350px;\n}&quot;,&quot;editors&quot;:&quot;001&quot;,&quot;css_external&quot;:&quot;https://unpkg.com/antd/dist/antd.css&quot;,&quot;js_external&quot;:&quot;https://unpkg.com/react@16.x/umd/react.development.js;https://unpkg.com/react-dom@16.x/umd/react-dom.development.js;https://unpkg.com/moment/min/moment-with-locales.js;https://unpkg.com/antd/dist/antd-with-locales.js&quot;,&quot;js_pre_processor&quot;:&quot;typescript&quot;}"/><input type="submit" value="Create New Pen with Prefilled Data" class="code-box-codepen"/></form><form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSACYwoNvkYTzMBOMTE0QgoaenCYAaEIOEBaFqQC2SMRPhMAvrtkRybAB4EMcBMhA1GDESAJsVpBVFJoWTwS4hSABMAAdcl9fFQMFAAsYCFwI2kRfAGYAVgAGFCMAbiDtEG19QxgTEmZrekZ1IIgVFFJ-Wl8AJSEMBrB-VV8AcnlWruzyatr6ppbaABEAeQBZX3bOnrGlVX6qmrqGrrRGFgB6Fh9aXe3aFlNzVcH1ka6CXYNjc7hLoJC39988gse4lShSui2dQAHgOADdfBAWABeAJWOhoAwwfhw3xSACesFhIHQLAO5FwCQATAAWDJwgB8wP2EDBFKCwLgGH4EBQtHpwV8YLQ_FCpAArowAHKkNi-aG-ZQYfkqWwEfC0ACisFljAAQuiAJIsAAUXTKiPIyK6AEoBtSmSy2RS8rogA"/><input type="submit" value="Create New Sandbox with Prefilled Data" class="code-box-codesandbox"/></form><i class="anticon anticon-copy code-box-code-copy"><svg viewBox="64 64 896 896" class="" data-icon="copy" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"></path></svg></i></div><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> List<span class="token punctuation">,</span> Avatar<span class="token punctuation">,</span> Button<span class="token punctuation">,</span> Skeleton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>

<span class="token keyword">import</span> reqwest <span class="token keyword">from</span> <span class="token string">'reqwest'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token number">3</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> fakeDataUrl <span class="token operator">=</span> <span class="token template-string"><span class="token string">`https://randomuser.me/api/?results=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>count<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&amp;inc=name,gender,email,nat&amp;noinfo`</span></span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">LoadMoreList</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
  state <span class="token operator">=</span> <span class="token punctuation">{</span>
    initLoading<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    loading<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    data<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    list<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>

  <span class="token function">componentDidMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getData</span><span class="token punctuation">(</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        initLoading<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        data<span class="token punctuation">:</span> res<span class="token punctuation">.</span>results<span class="token punctuation">,</span>
        list<span class="token punctuation">:</span> res<span class="token punctuation">.</span>results<span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  getData <span class="token operator">=</span> <span class="token punctuation">(</span>callback<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token function">reqwest</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      url<span class="token punctuation">:</span> fakeDataUrl<span class="token punctuation">,</span>
      type<span class="token punctuation">:</span> <span class="token string">'json'</span><span class="token punctuation">,</span>
      method<span class="token punctuation">:</span> <span class="token string">'get'</span><span class="token punctuation">,</span>
      contentType<span class="token punctuation">:</span> <span class="token string">'application/json'</span><span class="token punctuation">,</span>
      success<span class="token punctuation">:</span> <span class="token punctuation">(</span>res<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
        <span class="token function">callback</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  onLoadMore <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      loading<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
      list<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>data<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token operator">...</span><span class="token keyword">new</span> <span class="token class-name">Array</span><span class="token punctuation">(</span>count<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span><span class="token punctuation">{</span> loading<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getData</span><span class="token punctuation">(</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>data<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>results<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        data<span class="token punctuation">,</span>
        list<span class="token punctuation">:</span> data<span class="token punctuation">,</span>
        loading<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
        <span class="token comment" spellcheck="true">// Resetting window's offsetTop so as to display react-virtualized demo underfloor.</span>
        <span class="token comment" spellcheck="true">// In real scene, you can using public method of react-virtualized:</span>
        <span class="token comment" spellcheck="true">// https://stackoverflow.com/questions/46700726/how-to-use-public-method-updateposition-of-react-virtualized</span>
        window<span class="token punctuation">.</span><span class="token function">dispatchEvent</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Event</span><span class="token punctuation">(</span><span class="token string">'resize'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> initLoading<span class="token punctuation">,</span> loading<span class="token punctuation">,</span> list <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>
    <span class="token keyword">const</span> loadMore <span class="token operator">=</span> <span class="token operator">!</span>initLoading <span class="token operator">&amp;&amp;</span> <span class="token operator">!</span>loading <span class="token operator">?</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> textAlign<span class="token punctuation">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span> marginTop<span class="token punctuation">:</span> <span class="token number">12</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span> lineHeight<span class="token punctuation">:</span> <span class="token string">'32px'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onLoadMore<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>loading more<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token keyword">null</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>List</span>
        <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-loadmore-list<span class="token punctuation">"</span></span>
        <span class="token attr-name">loading</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>initLoading<span class="token punctuation">}</span></span>
        <span class="token attr-name">itemLayout</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>horizontal<span class="token punctuation">"</span></span>
        <span class="token attr-name">loadMore</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>loadMore<span class="token punctuation">}</span></span>
        <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>list<span class="token punctuation">}</span></span>
        <span class="token attr-name">renderItem</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>item <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>List.Item</span> <span class="token attr-name">actions={[&lt;a</span><span class="token punctuation">></span></span>edit<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token punctuation">,</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span><span class="token punctuation">></span></span>more<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token punctuation">]</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Skeleton</span> <span class="token attr-name">avatar</span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span></span> <span class="token attr-name">loading</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>loading<span class="token punctuation">}</span></span> <span class="token attr-name">active</span><span class="token punctuation">></span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>List.Item.Meta</span>
                <span class="token attr-name">avatar={&lt;Avatar</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span>
                title<span class="token operator">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://ant.design<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>name<span class="token punctuation">.</span>last<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token punctuation">}</span>
                description<span class="token operator">=</span><span class="token string">"Ant Design, a design language for background applications, is refined by Ant UED Team"</span>
              <span class="token operator">/</span><span class="token operator">></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>content<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Skeleton</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>List.Item</span><span class="token punctuation">></span></span>
        <span class="token punctuation">)</span><span class="token punctuation">}</span>
      <span class="token operator">/</span><span class="token operator">></span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>LoadMoreList</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><div class="highlight"><pre><code class="css"><span class="token selector"><span class="token class">.demo-loadmore-list</span> </span><span class="token punctuation">{</span>
  <span class="token property">min-height</span><span class="token punctuation">:</span> <span class="token number">350</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre></div></section></section><section class="code-box" id="components-list-demo-vertical"><section class="code-box-demo"><div class="ant-list ant-list-vertical ant-list-lg ant-list-split ant-list-something-after-last-item"><div class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-list-item"><div class="ant-list-item-extra-wrap"><div class="ant-list-item-main"><div class="ant-list-item-meta"><div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/></span></div><div class="ant-list-item-meta-content"><h4 class="ant-list-item-meta-title"><a href="http://ant.design">ant design part 0</a></h4><div class="ant-list-item-meta-description">Ant Design, a design language for background applications, is refined by Ant UED Team.</div></div></div><div class="ant-list-item-content">We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.</div><ul class="ant-list-item-action"><li><span><i style="margin-right:8px" class="anticon anticon-star-o"><svg viewBox="64 64 896 896" class="" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 0 0 .6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0 0 46.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3zM664.8 561.6l36.1 210.3L512 672.7 323.1 772l36.1-210.3-152.8-149L417.6 382 512 190.7 606.4 382l211.2 30.7-152.8 148.9z"></path></svg></i>156</span><em class="ant-list-item-action-split"></em></li><li><span><i style="margin-right:8px" class="anticon anticon-like-o"><svg viewBox="64 64 896 896" class="" data-icon="like" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M885.9 533.7c16.8-22.2 26.1-49.4 26.1-77.7 0-44.9-25.1-87.4-65.5-111.1a67.67 67.67 0 0 0-34.3-9.3H572.4l6-122.9c1.4-29.7-9.1-57.9-29.5-79.4A106.62 106.62 0 0 0 471 99.9c-52 0-98 35-111.8 85.1l-85.9 311H144c-17.7 0-32 14.3-32 32v364c0 17.7 14.3 32 32 32h601.3c9.2 0 18.2-1.8 26.5-5.4 47.6-20.3 78.3-66.8 78.3-118.4 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7-.2-12.6-2-25.1-5.6-37.1zM184 852V568h81v284h-81zm636.4-353l-21.9 19 13.9 25.4a56.2 56.2 0 0 1 6.9 27.3c0 16.5-7.2 32.2-19.6 43l-21.9 19 13.9 25.4a56.2 56.2 0 0 1 6.9 27.3c0 16.5-7.2 32.2-19.6 43l-21.9 19 13.9 25.4a56.2 56.2 0 0 1 6.9 27.3c0 22.4-13.2 42.6-33.6 51.8H329V564.8l99.5-360.5a44.1 44.1 0 0 1 42.2-32.3c7.6 0 15.1 2.2 21.1 6.7 9.9 7.4 15.2 18.6 14.6 30.5l-9.6 198.4h314.4C829 418.5 840 436.9 840 456c0 16.5-7.2 32.1-19.6 43z"></path></svg></i>156</span><em class="ant-list-item-action-split"></em></li><li><span><i style="margin-right:8px" class="anticon anticon-message"><svg viewBox="64 64 896 896" class="" data-icon="message" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M464 512a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm200 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm-400 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm661.2-173.6c-22.6-53.7-55-101.9-96.3-143.3a444.35 444.35 0 0 0-143.3-96.3C630.6 75.7 572.2 64 512 64h-2c-60.6.3-119.3 12.3-174.5 35.9a445.35 445.35 0 0 0-142 96.5c-40.9 41.3-73 89.3-95.2 142.8-23 55.4-34.6 114.3-34.3 174.9A449.4 449.4 0 0 0 112 714v152a46 46 0 0 0 46 46h152.1A449.4 449.4 0 0 0 510 960h2.1c59.9 0 118-11.6 172.7-34.3a444.48 444.48 0 0 0 142.8-95.2c41.3-40.9 73.8-88.7 96.5-142 23.6-55.2 35.6-113.9 35.9-174.5.3-60.9-11.5-120-34.8-175.6zm-151.1 438C704 845.8 611 884 512 884h-1.7c-60.3-.3-120.2-15.3-173.1-43.5l-8.4-4.5H188V695.2l-4.5-8.4C155.3 633.9 140.3 574 140 513.7c-.4-99.7 37.7-193.3 107.6-263.8 69.8-70.5 163.1-109.5 262.8-109.9h1.7c50 0 98.5 9.7 144.2 28.9 44.6 18.7 84.6 45.6 119 80 34.3 34.3 61.3 74.4 80 119 19.4 46.2 29.1 95.2 28.9 145.8-.6 99.6-39.7 192.9-110.1 262.7z"></path></svg></i>2</span></li></ul></div><div class="ant-list-item-extra"><img width="272" alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"/></div></div></div><div class="ant-list-item"><div class="ant-list-item-extra-wrap"><div class="ant-list-item-main"><div class="ant-list-item-meta"><div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/></span></div><div class="ant-list-item-meta-content"><h4 class="ant-list-item-meta-title"><a href="http://ant.design">ant design part 1</a></h4><div class="ant-list-item-meta-description">Ant Design, a design language for background applications, is refined by Ant UED Team.</div></div></div><div class="ant-list-item-content">We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.</div><ul class="ant-list-item-action"><li><span><i style="margin-right:8px" class="anticon anticon-star-o"><svg viewBox="64 64 896 896" class="" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 0 0 .6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0 0 46.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3zM664.8 561.6l36.1 210.3L512 672.7 323.1 772l36.1-210.3-152.8-149L417.6 382 512 190.7 606.4 382l211.2 30.7-152.8 148.9z"></path></svg></i>156</span><em class="ant-list-item-action-split"></em></li><li><span><i style="margin-right:8px" class="anticon anticon-like-o"><svg viewBox="64 64 896 896" class="" data-icon="like" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M885.9 533.7c16.8-22.2 26.1-49.4 26.1-77.7 0-44.9-25.1-87.4-65.5-111.1a67.67 67.67 0 0 0-34.3-9.3H572.4l6-122.9c1.4-29.7-9.1-57.9-29.5-79.4A106.62 106.62 0 0 0 471 99.9c-52 0-98 35-111.8 85.1l-85.9 311H144c-17.7 0-32 14.3-32 32v364c0 17.7 14.3 32 32 32h601.3c9.2 0 18.2-1.8 26.5-5.4 47.6-20.3 78.3-66.8 78.3-118.4 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7-.2-12.6-2-25.1-5.6-37.1zM184 852V568h81v284h-81zm636.4-353l-21.9 19 13.9 25.4a56.2 56.2 0 0 1 6.9 27.3c0 16.5-7.2 32.2-19.6 43l-21.9 19 13.9 25.4a56.2 56.2 0 0 1 6.9 27.3c0 16.5-7.2 32.2-19.6 43l-21.9 19 13.9 25.4a56.2 56.2 0 0 1 6.9 27.3c0 22.4-13.2 42.6-33.6 51.8H329V564.8l99.5-360.5a44.1 44.1 0 0 1 42.2-32.3c7.6 0 15.1 2.2 21.1 6.7 9.9 7.4 15.2 18.6 14.6 30.5l-9.6 198.4h314.4C829 418.5 840 436.9 840 456c0 16.5-7.2 32.1-19.6 43z"></path></svg></i>156</span><em class="ant-list-item-action-split"></em></li><li><span><i style="margin-right:8px" class="anticon anticon-message"><svg viewBox="64 64 896 896" class="" data-icon="message" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M464 512a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm200 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm-400 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm661.2-173.6c-22.6-53.7-55-101.9-96.3-143.3a444.35 444.35 0 0 0-143.3-96.3C630.6 75.7 572.2 64 512 64h-2c-60.6.3-119.3 12.3-174.5 35.9a445.35 445.35 0 0 0-142 96.5c-40.9 41.3-73 89.3-95.2 142.8-23 55.4-34.6 114.3-34.3 174.9A449.4 449.4 0 0 0 112 714v152a46 46 0 0 0 46 46h152.1A449.4 449.4 0 0 0 510 960h2.1c59.9 0 118-11.6 172.7-34.3a444.48 444.48 0 0 0 142.8-95.2c41.3-40.9 73.8-88.7 96.5-142 23.6-55.2 35.6-113.9 35.9-174.5.3-60.9-11.5-120-34.8-175.6zm-151.1 438C704 845.8 611 884 512 884h-1.7c-60.3-.3-120.2-15.3-173.1-43.5l-8.4-4.5H188V695.2l-4.5-8.4C155.3 633.9 140.3 574 140 513.7c-.4-99.7 37.7-193.3 107.6-263.8 69.8-70.5 163.1-109.5 262.8-109.9h1.7c50 0 98.5 9.7 144.2 28.9 44.6 18.7 84.6 45.6 119 80 34.3 34.3 61.3 74.4 80 119 19.4 46.2 29.1 95.2 28.9 145.8-.6 99.6-39.7 192.9-110.1 262.7z"></path></svg></i>2</span></li></ul></div><div class="ant-list-item-extra"><img width="272" alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"/></div></div></div><div class="ant-list-item"><div class="ant-list-item-extra-wrap"><div class="ant-list-item-main"><div class="ant-list-item-meta"><div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/></span></div><div class="ant-list-item-meta-content"><h4 class="ant-list-item-meta-title"><a href="http://ant.design">ant design part 2</a></h4><div class="ant-list-item-meta-description">Ant Design, a design language for background applications, is refined by Ant UED Team.</div></div></div><div class="ant-list-item-content">We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.</div><ul class="ant-list-item-action"><li><span><i style="margin-right:8px" class="anticon anticon-star-o"><svg viewBox="64 64 896 896" class="" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 0 0 .6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0 0 46.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3zM664.8 561.6l36.1 210.3L512 672.7 323.1 772l36.1-210.3-152.8-149L417.6 382 512 190.7 606.4 382l211.2 30.7-152.8 148.9z"></path></svg></i>156</span><em class="ant-list-item-action-split"></em></li><li><span><i style="margin-right:8px" class="anticon anticon-like-o"><svg viewBox="64 64 896 896" class="" data-icon="like" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M885.9 533.7c16.8-22.2 26.1-49.4 26.1-77.7 0-44.9-25.1-87.4-65.5-111.1a67.67 67.67 0 0 0-34.3-9.3H572.4l6-122.9c1.4-29.7-9.1-57.9-29.5-79.4A106.62 106.62 0 0 0 471 99.9c-52 0-98 35-111.8 85.1l-85.9 311H144c-17.7 0-32 14.3-32 32v364c0 17.7 14.3 32 32 32h601.3c9.2 0 18.2-1.8 26.5-5.4 47.6-20.3 78.3-66.8 78.3-118.4 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7-.2-12.6-2-25.1-5.6-37.1zM184 852V568h81v284h-81zm636.4-353l-21.9 19 13.9 25.4a56.2 56.2 0 0 1 6.9 27.3c0 16.5-7.2 32.2-19.6 43l-21.9 19 13.9 25.4a56.2 56.2 0 0 1 6.9 27.3c0 16.5-7.2 32.2-19.6 43l-21.9 19 13.9 25.4a56.2 56.2 0 0 1 6.9 27.3c0 22.4-13.2 42.6-33.6 51.8H329V564.8l99.5-360.5a44.1 44.1 0 0 1 42.2-32.3c7.6 0 15.1 2.2 21.1 6.7 9.9 7.4 15.2 18.6 14.6 30.5l-9.6 198.4h314.4C829 418.5 840 436.9 840 456c0 16.5-7.2 32.1-19.6 43z"></path></svg></i>156</span><em class="ant-list-item-action-split"></em></li><li><span><i style="margin-right:8px" class="anticon anticon-message"><svg viewBox="64 64 896 896" class="" data-icon="message" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M464 512a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm200 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm-400 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm661.2-173.6c-22.6-53.7-55-101.9-96.3-143.3a444.35 444.35 0 0 0-143.3-96.3C630.6 75.7 572.2 64 512 64h-2c-60.6.3-119.3 12.3-174.5 35.9a445.35 445.35 0 0 0-142 96.5c-40.9 41.3-73 89.3-95.2 142.8-23 55.4-34.6 114.3-34.3 174.9A449.4 449.4 0 0 0 112 714v152a46 46 0 0 0 46 46h152.1A449.4 449.4 0 0 0 510 960h2.1c59.9 0 118-11.6 172.7-34.3a444.48 444.48 0 0 0 142.8-95.2c41.3-40.9 73.8-88.7 96.5-142 23.6-55.2 35.6-113.9 35.9-174.5.3-60.9-11.5-120-34.8-175.6zm-151.1 438C704 845.8 611 884 512 884h-1.7c-60.3-.3-120.2-15.3-173.1-43.5l-8.4-4.5H188V695.2l-4.5-8.4C155.3 633.9 140.3 574 140 513.7c-.4-99.7 37.7-193.3 107.6-263.8 69.8-70.5 163.1-109.5 262.8-109.9h1.7c50 0 98.5 9.7 144.2 28.9 44.6 18.7 84.6 45.6 119 80 34.3 34.3 61.3 74.4 80 119 19.4 46.2 29.1 95.2 28.9 145.8-.6 99.6-39.7 192.9-110.1 262.7z"></path></svg></i>2</span></li></ul></div><div class="ant-list-item-extra"><img width="272" alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"/></div></div></div></div></div><div class="ant-list-footer"><div><b>ant design</b> footer part</div></div><div class="ant-list-pagination"><ul class="ant-pagination " unselectable="unselectable"><li title="上一页" class="ant-pagination-disabled ant-pagination-prev" aria-disabled="true"><a class="ant-pagination-item-link"><i class="anticon anticon-left"><svg viewBox="64 64 896 896" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" tabindex="0"><a>1</a></li><li title="2" class="ant-pagination-item ant-pagination-item-2" tabindex="0"><a>2</a></li><li title="3" class="ant-pagination-item ant-pagination-item-3" tabindex="0"><a>3</a></li><li title="4" class="ant-pagination-item ant-pagination-item-4" tabindex="0"><a>4</a></li><li title="5" class="ant-pagination-item ant-pagination-item-5" tabindex="0"><a>5</a></li><li title="6" class="ant-pagination-item ant-pagination-item-6" tabindex="0"><a>6</a></li><li title="7" class="ant-pagination-item ant-pagination-item-7" tabindex="0"><a>7</a></li><li title="8" class="ant-pagination-item ant-pagination-item-8" tabindex="0"><a>8</a></li><li title="下一页" tabindex="0" class=" ant-pagination-next" aria-disabled="false"><a class="ant-pagination-item-link"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a></li></ul></div></div></section><section class="code-box-meta markdown"><div class="code-box-title"><a href="#components-list-demo-vertical">竖排列表样式</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/list/demo/vertical.md" target="_blank" rel="noopener noreferrer"><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" class="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></a></div><div><p>通过设置 <code>itemLayout</code> 属性为 <code>vertical</code> 可实现竖排列表样式。</p></div><span class="code-expand-icon"><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg" class="code-expand-icon-show"/><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg" class="code-expand-icon-hide"/></span></section><section class="highlight-wrapper"><div class="highlight"><div class="code-box-actions"><form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data" value="{&quot;title&quot;:&quot;竖排列表样式 - Ant Design Demo&quot;,&quot;html&quot;:&quot;&lt;div id=\&quot;container\&quot; style=\&quot;padding: 24px\&quot;&gt;&lt;/div&gt;\n&lt;script&gt;\n  var mountNode = document.getElementById(&#x27;container&#x27;);\n&lt;/script&gt;&quot;,&quot;js&quot;:&quot;&quot;,&quot;css&quot;:&quot;@import &#x27;antd/dist/antd.css&#x27;;\n\n&quot;,&quot;editors&quot;:&quot;001&quot;,&quot;css_external&quot;:&quot;https://unpkg.com/antd/dist/antd.css&quot;,&quot;js_external&quot;:&quot;https://unpkg.com/react@16.x/umd/react.development.js;https://unpkg.com/react-dom@16.x/umd/react-dom.development.js;https://unpkg.com/moment/min/moment-with-locales.js;https://unpkg.com/antd/dist/antd-with-locales.js&quot;,&quot;js_pre_processor&quot;:&quot;typescript&quot;}"/><input type="submit" value="Create New Pen with Prefilled Data" class="code-box-codepen"/></form><form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSACYwoNvkYTzMBOMTE0QgoaenCYAaEIOEBaFqQC2SMRPhMAvrtkRybAB4EMcBMhA1GDESBDb9hmCZLNr9RuoA65CCpRSfloAAgAlIQxQsH5VEIByeSj4gG5ff0Dg8MjaABEAeQBZEJi4xJylVVT0gKDQ-LRGFgB6FggpZsbaFlNzar9arPiCZoNjXrh-3xCZ2bmHJ3GAC1oVKHc6W3UAHjaANxCIFgBebys6NAMYfjOQqQBPWFOQdBY28lxEEIAmABYUIxnAB821aED2QN82zgGH4EBQtEh5BmezQ_BCKlIAFdGAA5UhsELHELKDBYlS2Aj4WgAUVgFMYACF7gBJFgACniHku5Gu8QAlGlyKCYXCEUCHLogA"/><input type="submit" value="Create New Sandbox with Prefilled Data" class="code-box-codesandbox"/></form><i class="anticon anticon-copy code-box-code-copy"><svg viewBox="64 64 896 896" class="" data-icon="copy" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"></path></svg></i></div><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> List<span class="token punctuation">,</span> Avatar<span class="token punctuation">,</span> Icon <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> listData <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">23</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  listData<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    href<span class="token punctuation">:</span> <span class="token string">'http://ant.design'</span><span class="token punctuation">,</span>
    title<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`ant design part </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">,</span>
    avatar<span class="token punctuation">:</span> <span class="token string">'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png'</span><span class="token punctuation">,</span>
    description<span class="token punctuation">:</span> <span class="token string">'Ant Design, a design language for background applications, is refined by Ant UED Team.'</span><span class="token punctuation">,</span>
    content<span class="token punctuation">:</span> <span class="token string">'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> IconText <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> type<span class="token punctuation">,</span> text <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Icon</span> <span class="token attr-name">type</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>type<span class="token punctuation">}</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> marginRight<span class="token punctuation">:</span> <span class="token number">8</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
    <span class="token punctuation">{</span>text<span class="token punctuation">}</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>List</span>
    <span class="token attr-name">itemLayout</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vertical<span class="token punctuation">"</span></span>
    <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span>
    <span class="token attr-name">pagination</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
      onChange<span class="token punctuation">:</span> <span class="token punctuation">(</span>page<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>page<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      pageSize<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span></span><span class="token attr-name">}</span>
    <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>listData<span class="token punctuation">}</span></span>
    <span class="token attr-name">footer={&lt;div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b</span><span class="token punctuation">></span></span>ant design<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b</span><span class="token punctuation">></span></span> footer part<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">}</span>
    renderItem<span class="token operator">=</span><span class="token punctuation">{</span>item <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>List.Item</span>
        <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>title<span class="token punctuation">}</span></span>
        <span class="token attr-name">actions={[&lt;IconText</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>star-o<span class="token punctuation">"</span></span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>156<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>IconText</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>like-o<span class="token punctuation">"</span></span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>156<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>IconText</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>message<span class="token punctuation">"</span></span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">]</span><span class="token punctuation">}</span>
        extra<span class="token operator">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">width</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">272</span><span class="token punctuation">}</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>logo<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span>
      <span class="token operator">></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>List.Item.Meta</span>
          <span class="token attr-name">avatar</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token operator">&lt;</span>Avatar src<span class="token punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>avatar<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span>
          title<span class="token operator">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>href<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>title<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token punctuation">}</span>
          description<span class="token operator">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>description<span class="token punctuation">}</span>
        <span class="token operator">/</span><span class="token operator">></span>
        <span class="token punctuation">{</span>item<span class="token punctuation">.</span>content<span class="token punctuation">}</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>List.Item</span><span class="token punctuation">></span></span>
    <span class="token punctuation">)</span><span class="token punctuation">}</span>
  <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span>
  mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-list-demo-grid"><section class="code-box-demo"><div class="ant-list ant-list-split ant-list-grid"><div class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-row" style="margin-left:-8px;margin-right:-8px"><div style="padding-left:8px;padding-right:8px" class="ant-col-6"><div class="ant-list-item"><div class="ant-list-item-content ant-list-item-content-single"><div class="ant-card ant-card-bordered"><div class="ant-card-head"><div class="ant-card-head-wrapper"><div class="ant-card-head-title">Title 1</div></div></div><div class="ant-card-body">Card content</div></div></div></div></div><div style="padding-left:8px;padding-right:8px" class="ant-col-6"><div class="ant-list-item"><div class="ant-list-item-content ant-list-item-content-single"><div class="ant-card ant-card-bordered"><div class="ant-card-head"><div class="ant-card-head-wrapper"><div class="ant-card-head-title">Title 2</div></div></div><div class="ant-card-body">Card content</div></div></div></div></div><div style="padding-left:8px;padding-right:8px" class="ant-col-6"><div class="ant-list-item"><div class="ant-list-item-content ant-list-item-content-single"><div class="ant-card ant-card-bordered"><div class="ant-card-head"><div class="ant-card-head-wrapper"><div class="ant-card-head-title">Title 3</div></div></div><div class="ant-card-body">Card content</div></div></div></div></div><div style="padding-left:8px;padding-right:8px" class="ant-col-6"><div class="ant-list-item"><div class="ant-list-item-content ant-list-item-content-single"><div class="ant-card ant-card-bordered"><div class="ant-card-head"><div class="ant-card-head-wrapper"><div class="ant-card-head-title">Title 4</div></div></div><div class="ant-card-body">Card content</div></div></div></div></div></div></div></div></div></section><section class="code-box-meta markdown"><div class="code-box-title"><a href="#components-list-demo-grid">栅格列表</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/list/demo/grid.md" target="_blank" rel="noopener noreferrer"><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" class="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></a></div><div><p>可以通过设置 <code>List</code> 的 <code>grid</code> 属性来实现栅格列表，<code>column</code> 可设置期望显示的列数。</p></div><span class="code-expand-icon"><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg" class="code-expand-icon-show"/><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg" class="code-expand-icon-hide"/></span></section><section class="highlight-wrapper"><div class="highlight"><div class="code-box-actions"><form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data" value="{&quot;title&quot;:&quot;栅格列表 - Ant Design Demo&quot;,&quot;html&quot;:&quot;&lt;div id=\&quot;container\&quot; style=\&quot;padding: 24px\&quot;&gt;&lt;/div&gt;\n&lt;script&gt;\n  var mountNode = document.getElementById(&#x27;container&#x27;);\n&lt;/script&gt;&quot;,&quot;js&quot;:&quot;&quot;,&quot;css&quot;:&quot;@import &#x27;antd/dist/antd.css&#x27;;\n\n&quot;,&quot;editors&quot;:&quot;001&quot;,&quot;css_external&quot;:&quot;https://unpkg.com/antd/dist/antd.css&quot;,&quot;js_external&quot;:&quot;https://unpkg.com/react@16.x/umd/react.development.js;https://unpkg.com/react-dom@16.x/umd/react-dom.development.js;https://unpkg.com/moment/min/moment-with-locales.js;https://unpkg.com/antd/dist/antd-with-locales.js&quot;,&quot;js_pre_processor&quot;:&quot;typescript&quot;}"/><input type="submit" value="Create New Pen with Prefilled Data" class="code-box-codepen"/></form><form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSACYwoNvkYTzMBOMTE0QgoaenCYAaEIOEBaFqQC2SMRPhMAvrtkRybAB4EMcBMhA1GDESBDb9hmCZLNr9RuoA65CCpRSfloAAgAlIQxQsH5VEIByeSj4gG5ff0Dg8MjaABEAeQBZEJi4xJylVVT0gKDQ-LRGFgB6FggpZsbaFlNzar9arPiCZoNjXrh-3xCZ2bmHJ3GAC1oVKHc6W3UAHjaANxCIFgBebys6NAMYfjOQqQBPWFOQdBY28lxEEIAmABYUIxnAB821aED2QN82zgGH4EBQtEh5BmezQ_BCKlIAFdGAA5UhsELHELKDBYlS2Aj4WgAUVgFMYACF7gBJFgACniHku5Gu8QAlGlyKCYXCEUCHLogA"/><input type="submit" value="Create New Sandbox with Prefilled Data" class="code-box-codesandbox"/></form><i class="anticon anticon-copy code-box-code-copy"><svg viewBox="64 64 896 896" class="" data-icon="copy" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"></path></svg></i></div><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> List<span class="token punctuation">,</span> Card <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    title<span class="token punctuation">:</span> <span class="token string">'Title 1'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    title<span class="token punctuation">:</span> <span class="token string">'Title 2'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    title<span class="token punctuation">:</span> <span class="token string">'Title 3'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    title<span class="token punctuation">:</span> <span class="token string">'Title 4'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>List</span>
    <span class="token attr-name">grid</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> gutter<span class="token punctuation">:</span> <span class="token number">16</span><span class="token punctuation">,</span> column<span class="token punctuation">:</span> <span class="token number">4</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
    <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span>
    <span class="token attr-name">renderItem</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>item <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>List.Item</span><span class="token punctuation">></span></span>
        <span class="token operator">&lt;</span>Card title<span class="token punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>title<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Card content<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Card</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>List.Item</span><span class="token punctuation">></span></span>
    <span class="token punctuation">)</span><span class="token punctuation">}</span>
  <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span>
  mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-list-demo-resposive"><section class="code-box-demo"><div class="ant-list ant-list-split ant-list-grid"><div class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-row" style="margin-left:-8px;margin-right:-8px"><div style="padding-left:8px;padding-right:8px" class="ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8"><div class="ant-list-item"><div class="ant-list-item-content ant-list-item-content-single"><div class="ant-card ant-card-bordered"><div class="ant-card-head"><div class="ant-card-head-wrapper"><div class="ant-card-head-title">Title 1</div></div></div><div class="ant-card-body">Card content</div></div></div></div></div><div style="padding-left:8px;padding-right:8px" class="ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8"><div class="ant-list-item"><div class="ant-list-item-content ant-list-item-content-single"><div class="ant-card ant-card-bordered"><div class="ant-card-head"><div class="ant-card-head-wrapper"><div class="ant-card-head-title">Title 2</div></div></div><div class="ant-card-body">Card content</div></div></div></div></div><div style="padding-left:8px;padding-right:8px" class="ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8"><div class="ant-list-item"><div class="ant-list-item-content ant-list-item-content-single"><div class="ant-card ant-card-bordered"><div class="ant-card-head"><div class="ant-card-head-wrapper"><div class="ant-card-head-title">Title 3</div></div></div><div class="ant-card-body">Card content</div></div></div></div></div><div style="padding-left:8px;padding-right:8px" class="ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8"><div class="ant-list-item"><div class="ant-list-item-content ant-list-item-content-single"><div class="ant-card ant-card-bordered"><div class="ant-card-head"><div class="ant-card-head-wrapper"><div class="ant-card-head-title">Title 4</div></div></div><div class="ant-card-body">Card content</div></div></div></div></div><div style="padding-left:8px;padding-right:8px" class="ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8"><div class="ant-list-item"><div class="ant-list-item-content ant-list-item-content-single"><div class="ant-card ant-card-bordered"><div class="ant-card-head"><div class="ant-card-head-wrapper"><div class="ant-card-head-title">Title 5</div></div></div><div class="ant-card-body">Card content</div></div></div></div></div><div style="padding-left:8px;padding-right:8px" class="ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8"><div class="ant-list-item"><div class="ant-list-item-content ant-list-item-content-single"><div class="ant-card ant-card-bordered"><div class="ant-card-head"><div class="ant-card-head-wrapper"><div class="ant-card-head-title">Title 6</div></div></div><div class="ant-card-body">Card content</div></div></div></div></div></div></div></div></div></section><section class="code-box-meta markdown"><div class="code-box-title"><a href="#components-list-demo-resposive">响应式的栅格列表</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/list/demo/resposive.md" target="_blank" rel="noopener noreferrer"><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" class="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></a></div><div><p>响应式的栅格列表。尺寸与 <a href="https://ant.design/components/grid-cn/#Col">Layout Grid</a> 保持一致。</p></div><span class="code-expand-icon"><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg" class="code-expand-icon-show"/><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg" class="code-expand-icon-hide"/></span></section><section class="highlight-wrapper"><div class="highlight"><div class="code-box-actions"><form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data" value="{&quot;title&quot;:&quot;响应式的栅格列表 - Ant Design Demo&quot;,&quot;html&quot;:&quot;&lt;div id=\&quot;container\&quot; style=\&quot;padding: 24px\&quot;&gt;&lt;/div&gt;\n&lt;script&gt;\n  var mountNode = document.getElementById(&#x27;container&#x27;);\n&lt;/script&gt;&quot;,&quot;js&quot;:&quot;&quot;,&quot;css&quot;:&quot;@import &#x27;antd/dist/antd.css&#x27;;\n\n&quot;,&quot;editors&quot;:&quot;001&quot;,&quot;css_external&quot;:&quot;https://unpkg.com/antd/dist/antd.css&quot;,&quot;js_external&quot;:&quot;https://unpkg.com/react@16.x/umd/react.development.js;https://unpkg.com/react-dom@16.x/umd/react-dom.development.js;https://unpkg.com/moment/min/moment-with-locales.js;https://unpkg.com/antd/dist/antd-with-locales.js&quot;,&quot;js_pre_processor&quot;:&quot;typescript&quot;}"/><input type="submit" value="Create New Pen with Prefilled Data" class="code-box-codepen"/></form><form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSACYwoNvkYTzMBOMTE0QgoaenCYAaEIOEBaFqQC2SMRPhMAvrtkRybAB4EMcBMhA1GDESBDb9hmCZLNr9RuoA65CCpRSfloAAgAlIQxQsH5VEIByeSj4gG5ff0Dg8MjaABEAeQBZEJi4xJylVVT0gKDQ-LRGFgB6FggpZsbaFlNzar9arPiCZoNjXrh-3xCZ2bmHJ3GAC1oVKHc6W3UAHjaANxCIFgBebys6NAMYfjOQqQBPWFOQdBY28lxEEIAmABYUIxnAB821aED2QN82zgGH4EBQtEh5BmezQ_BCKlIAFdGAA5UhsELHELKDBYlS2Aj4WgAUVgFMYACF7gBJFgACniHku5Gu8QAlGlyKCYXCEUCHLogA"/><input type="submit" value="Create New Sandbox with Prefilled Data" class="code-box-codesandbox"/></form><i class="anticon anticon-copy code-box-code-copy"><svg viewBox="64 64 896 896" class="" data-icon="copy" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"></path></svg></i></div><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> List<span class="token punctuation">,</span> Card <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    title<span class="token punctuation">:</span> <span class="token string">'Title 1'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    title<span class="token punctuation">:</span> <span class="token string">'Title 2'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    title<span class="token punctuation">:</span> <span class="token string">'Title 3'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    title<span class="token punctuation">:</span> <span class="token string">'Title 4'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    title<span class="token punctuation">:</span> <span class="token string">'Title 5'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    title<span class="token punctuation">:</span> <span class="token string">'Title 6'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>List</span>
    <span class="token attr-name">grid</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> gutter<span class="token punctuation">:</span> <span class="token number">16</span><span class="token punctuation">,</span> xs<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> sm<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> md<span class="token punctuation">:</span> <span class="token number">4</span><span class="token punctuation">,</span> lg<span class="token punctuation">:</span> <span class="token number">4</span><span class="token punctuation">,</span> xl<span class="token punctuation">:</span> <span class="token number">6</span><span class="token punctuation">,</span> xxl<span class="token punctuation">:</span> <span class="token number">3</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
    <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span>
    <span class="token attr-name">renderItem</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>item <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>List.Item</span><span class="token punctuation">></span></span>
        <span class="token operator">&lt;</span>Card title<span class="token punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>title<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Card content<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Card</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>List.Item</span><span class="token punctuation">></span></span>
    <span class="token punctuation">)</span><span class="token punctuation">}</span>
  <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span>
  mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-list-demo-infinite-load"><section class="code-box-demo"><div class="demo-infinite-container"><div><div class="ant-list ant-list-split"><div class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-list-empty-text">暂无数据</div></div></div></div></div></div><style>.demo-infinite-container {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  overflow: auto;
  padding: 8px 24px;
  height: 300px;
}
.demo-loading-container {
  position: absolute;
  bottom: 40px;
  width: 100%;
  text-align: center;
}</style></section><section class="code-box-meta markdown"><div class="code-box-title"><a href="#components-list-demo-infinite-load">滚动加载</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/list/demo/infinite-load.md" target="_blank" rel="noopener noreferrer"><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" class="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></a></div><div><p>结合 <a href="https://github.com/CassetteRocks/react-infinite-scroller">react-infinite-scroller</a> 实现滚动自动加载列表。</p></div><span class="code-expand-icon"><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg" class="code-expand-icon-show"/><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg" class="code-expand-icon-hide"/></span></section><section class="highlight-wrapper"><div class="highlight"><div class="code-box-actions"><form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data" value="{&quot;title&quot;:&quot;滚动加载 - Ant Design Demo&quot;,&quot;html&quot;:&quot;&lt;div id=\&quot;container\&quot; style=\&quot;padding: 24px\&quot;&gt;&lt;/div&gt;\n&lt;script&gt;\n  var mountNode = document.getElementById(&#x27;container&#x27;);\n&lt;/script&gt;&quot;,&quot;js&quot;:&quot;&quot;,&quot;css&quot;:&quot;@import &#x27;antd/dist/antd.css&#x27;;\n\n.demo-infinite-container {\n  border: 1px solid #e8e8e8;\n  border-radius: 4px;\n  overflow: auto;\n  padding: 8px 24px;\n  height: 300px;\n}\n.demo-loading-container {\n  position: absolute;\n  bottom: 40px;\n  width: 100%;\n  text-align: center;\n}&quot;,&quot;editors&quot;:&quot;001&quot;,&quot;css_external&quot;:&quot;https://unpkg.com/antd/dist/antd.css&quot;,&quot;js_external&quot;:&quot;https://unpkg.com/react@16.x/umd/react.development.js;https://unpkg.com/react-dom@16.x/umd/react-dom.development.js;https://unpkg.com/moment/min/moment-with-locales.js;https://unpkg.com/antd/dist/antd-with-locales.js&quot;,&quot;js_pre_processor&quot;:&quot;typescript&quot;}"/><input type="submit" value="Create New Pen with Prefilled Data" class="code-box-codepen"/></form><form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSACYwoNvkYTzMBOMTE0QgoaenCYAaEIOEBaFqQC2SMRPhMAvrtkRybAB4EMcBMhA1GDESAJsVpBQcjkI9BddpoDMfgAEwAA65AEBAEak_Gz8iAEAjChGAWRQECwBAMQwABx5eQDcoeFRMf4K_GgsEACucPEALMnFYQGkAG7-YFCkAO7xaLW0pK3h6Cw15LjxuckBAEzNRmMBABYwELhrtPEAzAAMBy2h2qEOME4KvdUGuF50vuT-QSUBKKRwHhAUgxFpwxgqyitBGKiaxxWbz6GVoa3iCSOAFJVvQjLQFGh0rhyPEMLZ_K1tCBtPpDDATCRmN5bOpQhAVB9-LQAgAlIQYFlgfiqAIAcnknL5rQZTJZ7OEABEAPIAWQC3N5Ao5GOUKmF9MZ0RZfLQjBYAHoalIDXraCxTOYNe4tcz-QQDQZjJa4Na3uEPR6SWTnTsVFBqXRaaIADw1DoBDIAXmCVkefn4sdStAAnrAYyAJlMZotlrGAHwho0QDr50IhuAYfgQFC0MttDpoQJOWqMABypDYASjAWUGFqKlsBHwtAAorBB4wAEIpgCSLAAFHzvE9_HyAJStIuV6u1_Mk3RAA"/><input type="submit" value="Create New Sandbox with Prefilled Data" class="code-box-codesandbox"/></form><i class="anticon anticon-copy code-box-code-copy"><svg viewBox="64 64 896 896" class="" data-icon="copy" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"></path></svg></i></div><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> List<span class="token punctuation">,</span> message<span class="token punctuation">,</span> Avatar<span class="token punctuation">,</span> Spin <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> reqwest <span class="token keyword">from</span> <span class="token string">'reqwest'</span><span class="token punctuation">;</span>

<span class="token keyword">import</span> InfiniteScroll <span class="token keyword">from</span> <span class="token string">'react-infinite-scroller'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> fakeDataUrl <span class="token operator">=</span> <span class="token string">'https://randomuser.me/api/?results=5&amp;inc=name,gender,email,nat&amp;noinfo'</span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">InfiniteListExample</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
  state <span class="token operator">=</span> <span class="token punctuation">{</span>
    data<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    loading<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    hasMore<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>

  getData <span class="token operator">=</span> <span class="token punctuation">(</span>callback<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token function">reqwest</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      url<span class="token punctuation">:</span> fakeDataUrl<span class="token punctuation">,</span>
      type<span class="token punctuation">:</span> <span class="token string">'json'</span><span class="token punctuation">,</span>
      method<span class="token punctuation">:</span> <span class="token string">'get'</span><span class="token punctuation">,</span>
      contentType<span class="token punctuation">:</span> <span class="token string">'application/json'</span><span class="token punctuation">,</span>
      success<span class="token punctuation">:</span> <span class="token punctuation">(</span>res<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
        <span class="token function">callback</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">componentDidMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getData</span><span class="token punctuation">(</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        data<span class="token punctuation">:</span> res<span class="token punctuation">.</span>results<span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  handleInfiniteOnLoad <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> data <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>data<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      loading<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">.</span>length <span class="token operator">></span> <span class="token number">14</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      message<span class="token punctuation">.</span><span class="token function">warning</span><span class="token punctuation">(</span><span class="token string">'Infinite List loaded all'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        hasMore<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        loading<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">return</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getData</span><span class="token punctuation">(</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
      data <span class="token operator">=</span> data<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>results<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        data<span class="token punctuation">,</span>
        loading<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-infinite-container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>InfiniteScroll</span>
          <span class="token attr-name">initialLoad</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span></span>
          <span class="token attr-name">pageStart</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">0</span><span class="token punctuation">}</span></span>
          <span class="token attr-name">loadMore</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleInfiniteOnLoad<span class="token punctuation">}</span></span>
          <span class="token attr-name">hasMore</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>loading <span class="token operator">&amp;&amp;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>hasMore<span class="token punctuation">}</span></span>
          <span class="token attr-name">useWindow</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span></span>
        <span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>List</span>
            <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>data<span class="token punctuation">}</span></span>
            <span class="token attr-name">renderItem</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>item <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
              <span class="token operator">&lt;</span>List<span class="token punctuation">.</span>Item key<span class="token punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>id<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>List.Item.Meta</span>
                  <span class="token attr-name">avatar={&lt;Avatar</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span>
                  title<span class="token operator">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://ant.design<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>name<span class="token punctuation">.</span>last<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token punctuation">}</span>
                  description<span class="token operator">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>email<span class="token punctuation">}</span>
                <span class="token operator">/</span><span class="token operator">></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>Content<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>List.Item</span><span class="token punctuation">></span></span>
            <span class="token punctuation">)</span><span class="token punctuation">}</span>
          <span class="token operator">></span>
            <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>loading <span class="token operator">&amp;&amp;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>hasMore <span class="token operator">&amp;&amp;</span> <span class="token punctuation">(</span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-loading-container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Spin</span> <span class="token punctuation">/></span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
            <span class="token punctuation">)</span><span class="token punctuation">}</span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>List</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>InfiniteScroll</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>InfiniteListExample</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><div class="highlight"><pre><code class="css"><span class="token selector"><span class="token class">.demo-infinite-container</span> </span><span class="token punctuation">{</span>
  <span class="token property">border</span><span class="token punctuation">:</span> <span class="token number">1</span>px solid <span class="token hexcode">#e8e8e8</span><span class="token punctuation">;</span>
  <span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">4</span>px<span class="token punctuation">;</span>
  <span class="token property">overflow</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">8</span>px <span class="token number">24</span>px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">300</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.demo-loading-container</span> </span><span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">bottom</span><span class="token punctuation">:</span> <span class="token number">40</span>px<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100%</span><span class="token punctuation">;</span>
  <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre></div></section></section><section class="code-box" id="components-list-demo-infinite-virtualized-load"><section class="code-box-demo"><div class="ant-list ant-list-split"><div class="ant-spin-nested-loading"><div class="ant-spin-container"></div></div></div><style>.demo-loading {
  position: absolute;
  bottom: -40px;
  left: 50%;
}</style></section><section class="code-box-meta markdown"><div class="code-box-title"><a href="#components-list-demo-infinite-virtualized-load">滚动加载无限长列表</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/list/demo/infinite-virtualized-load.md" target="_blank" rel="noopener noreferrer"><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" class="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></a></div><div><p>结合 <a href="https://github.com/bvaughn/react-virtualized">react-virtualized</a> 实现滚动加载无限长列表，带有虚拟化（<a href="https://blog.jscrambler.com/optimizing-react-rendering-through-virtualization/">virtualization</a>）功能，能够提高数据量大时候长列表的性能。</p><p><code>virtualized</code> 是在大数据列表中应用的一种技术，主要是为了减少不可见区域不必要的渲染从而提高性能，特别是数据量在成千上万条效果尤为明显。<a href="https://blog.jscrambler.com/optimizing-react-rendering-through-virtualization/">了解更多</a></p></div><span class="code-expand-icon"><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg" class="code-expand-icon-show"/><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg" class="code-expand-icon-hide"/></span></section><section class="highlight-wrapper"><div class="highlight"><div class="code-box-actions"><form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data" value="{&quot;title&quot;:&quot;滚动加载无限长列表 - Ant Design Demo&quot;,&quot;html&quot;:&quot;&lt;div id=\&quot;container\&quot; style=\&quot;padding: 24px\&quot;&gt;&lt;/div&gt;\n&lt;script&gt;\n  var mountNode = document.getElementById(&#x27;container&#x27;);\n&lt;/script&gt;&quot;,&quot;js&quot;:&quot;&quot;,&quot;css&quot;:&quot;@import &#x27;antd/dist/antd.css&#x27;;\n\n.demo-loading {\n  position: absolute;\n  bottom: -40px;\n  left: 50%;\n}&quot;,&quot;editors&quot;:&quot;001&quot;,&quot;css_external&quot;:&quot;https://unpkg.com/antd/dist/antd.css&quot;,&quot;js_external&quot;:&quot;https://unpkg.com/react@16.x/umd/react.development.js;https://unpkg.com/react-dom@16.x/umd/react-dom.development.js;https://unpkg.com/moment/min/moment-with-locales.js;https://unpkg.com/antd/dist/antd-with-locales.js&quot;,&quot;js_pre_processor&quot;:&quot;typescript&quot;}"/><input type="submit" value="Create New Pen with Prefilled Data" class="code-box-codepen"/></form><form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSACYwoNvkYTzMBOMTE0QgoaenCYAaEIOEBaFqQC2SMRPhMAvrtkRybAB4EMcBMhA1GDESAJsVpBVFJoWB3AAJgAHXJeXiikcBC0EBSIXmgARmRQAK70ANz-gTGktLSqUQoALAAMKEapAV6wYLRRAKwFAKSl2iDa-oYwJiTM1vSM6v4QKsH8tF4ASkIYI2D8ql4A5PKTc6UDQyPjwgAiAPIAsl7TswsTtEqqy_2DpMPzaIwsAPQeUg93tCym5hfkq9cjcwQHgZjJ84N80oFIVDmq0QQALWgqKBdOi2dQAHg8ADcvBAWABeXxWOhoAwwfhErxSACesEJIHQLA85FwUQATHlikSAHzop4QLHc_zouAYfgQFC0IVlLFofheJwJRgAOVIbC8-K8ygwCRUtgI-FoAFFYHrGAAhakASRYAAo5t1SeRyXMAJSlPmi8WS7nNXRAA"/><input type="submit" value="Create New Sandbox with Prefilled Data" class="code-box-codesandbox"/></form><i class="anticon anticon-copy code-box-code-copy"><svg viewBox="64 64 896 896" class="" data-icon="copy" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"></path></svg></i></div><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> List<span class="token punctuation">,</span> message<span class="token punctuation">,</span> Avatar<span class="token punctuation">,</span> Spin <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>

<span class="token keyword">import</span> reqwest <span class="token keyword">from</span> <span class="token string">'reqwest'</span><span class="token punctuation">;</span>

<span class="token keyword">import</span> WindowScroller <span class="token keyword">from</span> <span class="token string">'react-virtualized/dist/commonjs/WindowScroller'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> AutoSizer <span class="token keyword">from</span> <span class="token string">'react-virtualized/dist/commonjs/AutoSizer'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> VList <span class="token keyword">from</span> <span class="token string">'react-virtualized/dist/commonjs/List'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> InfiniteLoader <span class="token keyword">from</span> <span class="token string">'react-virtualized/dist/commonjs/InfiniteLoader'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> fakeDataUrl <span class="token operator">=</span> <span class="token string">'https://randomuser.me/api/?results=5&amp;inc=name,gender,email,nat&amp;noinfo'</span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">VirtualizedExample</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
  state <span class="token operator">=</span> <span class="token punctuation">{</span>
    data<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    loading<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>

  loadedRowsMap <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>

  getData <span class="token operator">=</span> <span class="token punctuation">(</span>callback<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token function">reqwest</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      url<span class="token punctuation">:</span> fakeDataUrl<span class="token punctuation">,</span>
      type<span class="token punctuation">:</span> <span class="token string">'json'</span><span class="token punctuation">,</span>
      method<span class="token punctuation">:</span> <span class="token string">'get'</span><span class="token punctuation">,</span>
      contentType<span class="token punctuation">:</span> <span class="token string">'application/json'</span><span class="token punctuation">,</span>
      success<span class="token punctuation">:</span> <span class="token punctuation">(</span>res<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
        <span class="token function">callback</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">componentDidMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getData</span><span class="token punctuation">(</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        data<span class="token punctuation">:</span> res<span class="token punctuation">.</span>results<span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  handleInfiniteOnLoad <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> startIndex<span class="token punctuation">,</span> stopIndex <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> data <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>data<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      loading<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> startIndex<span class="token punctuation">;</span> i <span class="token operator">&lt;=</span> stopIndex<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment" spellcheck="true">// 1 means loading</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>loadedRowsMap<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">.</span>length <span class="token operator">></span> <span class="token number">19</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      message<span class="token punctuation">.</span><span class="token function">warning</span><span class="token punctuation">(</span><span class="token string">'Virtualized List loaded all'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        loading<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">return</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getData</span><span class="token punctuation">(</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
      data <span class="token operator">=</span> data<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>results<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        data<span class="token punctuation">,</span>
        loading<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  isRowLoaded <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> index <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token operator">!</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>loadedRowsMap<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  renderItem <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> index<span class="token punctuation">,</span> key<span class="token punctuation">,</span> style <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>
    <span class="token keyword">const</span> item <span class="token operator">=</span> data<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>List.Item</span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>key<span class="token punctuation">}</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>style<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>List.Item.Meta</span>
          <span class="token attr-name">avatar={&lt;Avatar</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span>
          title<span class="token operator">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://ant.design<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>name<span class="token punctuation">.</span>last<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token punctuation">}</span>
          description<span class="token operator">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>email<span class="token punctuation">}</span>
        <span class="token operator">/</span><span class="token operator">></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>Content<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>List.Item</span><span class="token punctuation">></span></span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>
    <span class="token keyword">const</span> vlist <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> height<span class="token punctuation">,</span> isScrolling<span class="token punctuation">,</span> onChildScroll<span class="token punctuation">,</span> scrollTop<span class="token punctuation">,</span> onRowsRendered<span class="token punctuation">,</span> width <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>VList</span>
        <span class="token attr-name">autoHeight</span>
        <span class="token attr-name">height</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>height<span class="token punctuation">}</span></span>
        <span class="token attr-name">isScrolling</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>isScrolling<span class="token punctuation">}</span></span>
        <span class="token attr-name">onScroll</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>onChildScroll<span class="token punctuation">}</span></span>
        <span class="token attr-name">overscanRowCount</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">2</span><span class="token punctuation">}</span></span>
        <span class="token attr-name">rowCount</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">.</span>length<span class="token punctuation">}</span></span>
        <span class="token attr-name">rowHeight</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">73</span><span class="token punctuation">}</span></span>
        <span class="token attr-name">rowRenderer</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>renderItem<span class="token punctuation">}</span></span>
        <span class="token attr-name">onRowsRendered</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>onRowsRendered<span class="token punctuation">}</span></span>
        <span class="token attr-name">scrollTop</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>scrollTop<span class="token punctuation">}</span></span>
        <span class="token attr-name">width</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>width<span class="token punctuation">}</span></span>
      <span class="token punctuation">/></span></span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> autoSize <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> height<span class="token punctuation">,</span> isScrolling<span class="token punctuation">,</span> onChildScroll<span class="token punctuation">,</span> scrollTop<span class="token punctuation">,</span> onRowsRendered <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>AutoSizer</span> <span class="token attr-name">disableHeight</span><span class="token punctuation">></span></span>
        <span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">{</span> width <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token function">vlist</span><span class="token punctuation">(</span><span class="token punctuation">{</span> height<span class="token punctuation">,</span> isScrolling<span class="token punctuation">,</span> onChildScroll<span class="token punctuation">,</span> scrollTop<span class="token punctuation">,</span> onRowsRendered<span class="token punctuation">,</span> width <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>AutoSizer</span><span class="token punctuation">></span></span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> infiniteLoader <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> height<span class="token punctuation">,</span> isScrolling<span class="token punctuation">,</span> onChildScroll<span class="token punctuation">,</span> scrollTop <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>InfiniteLoader</span>
        <span class="token attr-name">isRowLoaded</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>isRowLoaded<span class="token punctuation">}</span></span>
        <span class="token attr-name">loadMoreRows</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleInfiniteOnLoad<span class="token punctuation">}</span></span>
        <span class="token attr-name">rowCount</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">.</span>length<span class="token punctuation">}</span></span>
      <span class="token punctuation">></span></span>
        <span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">{</span> onRowsRendered <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token function">autoSize</span><span class="token punctuation">(</span><span class="token punctuation">{</span> height<span class="token punctuation">,</span> isScrolling<span class="token punctuation">,</span> onChildScroll<span class="token punctuation">,</span> scrollTop<span class="token punctuation">,</span> onRowsRendered <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>InfiniteLoader</span><span class="token punctuation">></span></span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>List</span><span class="token punctuation">></span></span>
        <span class="token punctuation">{</span>
          data<span class="token punctuation">.</span>length <span class="token operator">></span> <span class="token number">0</span> <span class="token operator">&amp;&amp;</span> <span class="token punctuation">(</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>WindowScroller</span><span class="token punctuation">></span></span>
              <span class="token punctuation">{</span>infiniteLoader<span class="token punctuation">}</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>WindowScroller</span><span class="token punctuation">></span></span>
          <span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
        <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>loading <span class="token operator">&amp;&amp;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Spin</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-loading<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>List</span><span class="token punctuation">></span></span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>VirtualizedExample</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><div class="highlight"><pre><code class="css"><span class="token selector"><span class="token class">.demo-loading</span> </span><span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">bottom</span><span class="token punctuation">:</span> -<span class="token number">40</span>px<span class="token punctuation">;</span>
  <span class="token property">left</span><span class="token punctuation">:</span> <span class="token number">50%</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre></div></section></section></div></div><section class="markdown api-container"><h2 id="API"><span>API</span><a href="#API" class="anchor">#</a></h2><h3 id="List"><span>List</span><a href="#List" class="anchor">#</a></h3><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>bordered</td><td>是否展示边框</td><td>boolean</td><td>false</td></tr><tr><td>footer</td><td>列表底部</td><td>string<!-- -->|<!-- -->ReactNode</td><td>-</td></tr><tr><td>grid</td><td>列表栅格配置</td><td>object</td><td>-</td></tr><tr><td>header</td><td>列表头部</td><td>string<!-- -->|<!-- -->ReactNode</td><td>-</td></tr><tr><td>itemLayout</td><td>设置 <code>List.Item</code> 布局, 设置成 <code>vertical</code> 则竖直样式显示, 默认横排</td><td>string</td><td>-</td></tr><tr><td>loading</td><td>当卡片内容还在加载中时，可以用 <code>loading</code> 展示一个占位</td><td>boolean<!-- -->|<a href="https://ant.design/components/spin-cn/#API">object</a> (<a href="https://github.com/ant-design/ant-design/issues/8659">更多</a>)</td><td>false</td></tr><tr><td>loadMore</td><td>加载更多</td><td>string<!-- -->|<!-- -->ReactNode</td><td>-</td></tr><tr><td>locale</td><td>默认文案设置，目前包括空数据文案</td><td>object</td><td>emptyText: &#x27;暂无数据&#x27;</td></tr><tr><td>pagination</td><td>对应的 <code>pagination</code> 配置, 设置 <code>false</code> 不显示</td><td>boolean<!-- -->|<!-- -->object</td><td>false</td></tr><tr><td>size</td><td>list 的尺寸</td><td><code>default</code> <!-- -->|<!-- --> <code>middle</code> <!-- -->|<!-- --> <code>small</code></td><td><code>default</code></td></tr><tr><td>split</td><td>是否展示分割线</td><td>boolean</td><td>true</td></tr></tbody></table><h3 id="pagination"><span>pagination</span><a href="#pagination" class="anchor">#</a></h3><p>分页的配置项。</p><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>position</td><td>指定分页显示的位置</td><td>&#x27;top&#x27; <!-- -->|<!-- --> &#x27;bottom&#x27; <!-- -->|<!-- --> &#x27;both&#x27;</td><td>&#x27;bottom&#x27;</td></tr></tbody></table><p>更多配置项，请查看 <a href="/components/pagination-cn/"><code>Pagination</code></a>。</p><h3 id="List-grid-props"><span>List grid props</span><a href="#List-grid-props" class="anchor">#</a></h3><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>column</td><td>列数</td><td>number</td><td>-</td></tr><tr><td>gutter</td><td>栅格间隔</td><td>number</td><td>0</td></tr><tr><td>xs</td><td><code>&lt;576px</code> 展示的列数</td><td>number</td><td>-</td></tr><tr><td>sm</td><td><code>≥576px</code> 展示的列数</td><td>number</td><td>-</td></tr><tr><td>md</td><td><code>≥768px</code> 展示的列数</td><td>number</td><td>-</td></tr><tr><td>lg</td><td><code>≥992px</code> 展示的列数</td><td>number</td><td>-</td></tr><tr><td>xl</td><td><code>≥1200px</code> 展示的列数</td><td>number</td><td>-</td></tr><tr><td>xxl</td><td><code>≥1600px</code> 展示的列数</td><td>number</td><td>-</td></tr></tbody></table><h3 id="List.Item"><span>List.Item</span><a href="#List.Item" class="anchor">#</a></h3><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>actions</td><td>列表操作组，根据 <code>itemLayout</code> 的不同, 位置在卡片底部或者最右侧</td><td>Array<!-- -->&lt;<!-- -->ReactNode&gt;</td><td>-</td></tr><tr><td>extra</td><td>额外内容, 通常用在 <code>itemLayout</code> 为 <code>vertical</code> 的情况下, 展示右侧内容; <code>horizontal</code> 展示在列表元素最右侧</td><td>string<!-- -->|<!-- -->ReactNode</td><td>-</td></tr></tbody></table><h3 id="List.Item.Meta"><span>List.Item.Meta</span><a href="#List.Item.Meta" class="anchor">#</a></h3><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>avatar</td><td>列表元素的图标</td><td>ReactNode</td><td>-</td></tr><tr><td>description</td><td>列表元素的描述内容</td><td>string<!-- -->|<!-- -->ReactNode</td><td>-</td></tr><tr><td>title</td><td>列表元素的标题</td><td>string<!-- -->|<!-- -->ReactNode</td><td>-</td></tr></tbody></table></section></article></div></div><div class="ant-row"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-lg-18 ant-col-lg-offset-6 ant-col-xl-19 ant-col-xl-offset-5 ant-col-xxl-20 ant-col-xxl-offset-4"><section class="prev-next-nav"><a class="prev-page" href="/components/collapse-cn/"><i class="anticon anticon-left footer-nav-icon-before"><svg viewBox="64 64 896 896" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i><span>Collapse</span><span class="chinese">折叠面板</span><i class="anticon anticon-right footer-nav-icon-after"><svg viewBox="64 64 896 896" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a><a class="next-page" href="/components/popover-cn/"><i class="anticon anticon-left footer-nav-icon-before"><svg viewBox="64 64 896 896" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i><span>Popover</span><span class="chinese">气泡卡片</span><i class="anticon anticon-right footer-nav-icon-after"><svg viewBox="64 64 896 896" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a></section></div></div></div><footer id="footer"><div class="footer-wrap"><div class="ant-row"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6"><div class="footer-center"><h2><span>相关资源</span></h2><div><a href="http://pro.ant.design">Ant Design Pro</a></div><div><a href="http://mobile.ant.design">Ant Design Mobile</a></div><div><a href="http://ng.ant.design">NG-ZORRO</a><span> - </span>Ant Design of Angular</div><div><a href="http://ng.mobile.ant.design">NG-ZORRO-MOBILE</a></div><div><a target="_blank " href="https://github.com/websemantics/awesome-ant-design"><span>Awesome Ant Design</span></a></div><div><span class="ant-badge"><a target="_blank" rel="noopener noreferrer" href="http://kitchen.alipay.com">Kitchen</a><span> - </span><span>Sketch 工具集</span><sup data-show="true" class="ant-scroll-number ant-badge-dot" style="right:-3px;margin-top:0"></sup></span></div><div><a href="http://scaffold.ant.design">Scaffolds</a><span> - </span><span>脚手架市场</span></div><div><a target="_blank" rel="noopener noreferrer" href="http://umijs.org/">Umi</a> - <span>React 应用开发框架</span></div><div><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva">dva</a> - <span>数据流前端框架</span></div><div><a target="_blank" rel="noopener noreferrer" href="http://motion.ant.design">Ant Motion</a><span> - </span><span>设计动效</span></div><div><a target="_blank" rel="noopener noreferrer" href="http://library.ant.design/">Axure Library</a><span> - </span><span>Axure 部件库</span></div><div><a target="_blank" rel="noopener noreferrer" href="http://ux.ant.design">Ant UX</a><span> - </span><span>页面逻辑素材</span></div><div><a target="_blank " href="http://ant-design.gitee.io/"><span>国内镜像站点 🇨🇳</span></a></div></div></div><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6"><div class="footer-center"><h2><span>社区</span></h2><div><a target="_blank" rel="noopener noreferrer" href="http://zhuanlan.zhihu.com/antdesign"><span>知乎专栏</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="http://medium.com/ant-design/">Medium</a></div><div><a target="_blank" rel="noopener noreferrer" href="http://twitter.com/antdesignui">Twitter</a></div><div><a target="_blank" rel="noopener noreferrer" href="http://zhuanlan.zhihu.com/xtech"><span>体验科技专栏</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="http://seeconf.alipay.com/">SEE Conf</a><span> - </span><span>蚂蚁体验科技大会</span></div><div><a target="_blank " href="/docs/spec/work-with-us"><span>加入我们</span></a></div></div></div><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6"><div class="footer-center"><h2><span>帮助</span></h2><div><a target="_blank " href="https://github.com/ant-design/ant-design">GitHub</a></div><div><a href="/changelog"><span>更新记录</span></a></div><div><a target="_blank " href="https://www.yuque.com/ant-design/course"><span>Ant Design 实战教程</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="/docs/react/faq"><span>常见问题</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design"><span>在线讨论 (中文)</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design-english"><span>在线讨论 (English)</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="http://new-issue.ant.design/"><span>报告 Bug</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues"><span>讨论列表</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="http://stackoverflow.com/questions/tagged/antd"><span>StackOverflow</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="https://segmentfault.com/t/antd"><span>SegmentFault</span></a></div></div></div><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6"><div class="footer-center"><h2><img class="title-icon" src="https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg" alt="AFX Cloud"/><span>更多产品</span></h2><div><a target="_blank" rel="noopener noreferrer" href="https://yuque.com/"><span>语雀</span></a><span> - </span><span>知识创作与分享工具</span></div><div><a target="_blank" rel="noopener noreferrer" href="https://yunfengdie.com/"><span>云凤蝶</span></a><span> - </span><span>移动建站平台</span></div><div><a target="_blank" rel="noopener noreferrer" href="https://antv.alipay.com/">AntV</a><span> - </span><span>数据可视化</span></div><div><a target="_blank" rel="noopener noreferrer" href="https://eggjs.org/">Egg</a><span> - </span><span>企业级 Node 开发框架</span></div><div><a target="_blank" rel="noopener noreferrer" href="http://xcloud.alipay.com/"><span>蚂蚁体验云</span></a></div><div style="margin-top:20px"><div><div style="padding:4px;background:#fff;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.1);display:inline-block;cursor:pointer"><div style="width:80px;height:16px;border-radius:2px;background:#1890ff"></div></div></div></div></div></div></div></div><div class="bottom-bar">Made with <span class="heart">❤</span> by<a target="_blank" rel="noopener noreferrer" href="https://xtech.antfin.com"><span>AFX</span></a></div></footer></div>
    </div>
    <script src="/common.js"></script>
    <script src="/index.js"></script>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-72788897-1"></script>
    <script>
    if (!location.port) {
      // Enable Google Analytics
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'UA-72788897-1');
    }
    </script>
    <!-- Hotjar Tracking Code for ant.design -->
    <script>
    (function(h,o,t,j,a,r){
      h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
      h._hjSettings={hjid:473408,hjsv:5};
      a=o.getElementsByTagName('head')[0];
      r=o.createElement('script');r.async=1;
      r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
      a.appendChild(r);
    })(window,document,'//static.hotjar.com/c/hotjar-','.js?sv=');
    </script>
  </body>
</html>
